<template>
  <div :class="isXS ? 'q-pa-md' : 'q-pa-xl'" class="login-page-cls fit row justify-center items-center overflow-hidden">
    <transition appear name="q-transition--jump-down">
      <div :key="'login'" class="login-full-box row justify-center no-wrap overflow-hidden">
        <q-img v-if="!isXS" alt="LOGIN-IMG" class="login-image aspect-ratio-1" src="~assets/LOGIN-LT.png"></q-img>
        <div class="bg-grey-2 row items-center justify-center">
          <div class="login-box column no-wrap justify-center q-gutter-y-lg">
            <div class="text-h3 q-pb-xl text-weight-medium text-grey-9 text-center">
              {{ $t('LoginTips') }}
            </div>
            <AccountLogin></AccountLogin>
          </div>
        </div>
      </div>
    </transition>
    <!--    <div v-if="!isXS" class="login-normal-box row justify-center no-wrap">-->
    <!--      <img alt="LOGIN-IMG" class="login-normal-box-left" src="~assets/LOGIN-LT.png">-->
    <!--      <div class="login-normal-box-right">-->
    <!--        <div class="login-normal-box-right-container">-->
    <!--          <div class="text-h3 q-pb-xl text-weight-medium text-grey-9 text-center">-->
    <!--            {{ $t('LoginTips') }}-->
    <!--          </div>-->
    <!--          <AccountLogin></AccountLogin>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <q-card v-else class="login-box shadow-8 overflow-hidden">-->
    <!--      <transition name="q-transition&#45;&#45;jump-left">-->
    <!--        <div :key="'login'" class="fit login-box-container">-->
    <!--          <div class="text-h3 q-pb-xl text-weight-medium text-grey-9 text-center">-->
    <!--            {{ $t('LoginTips') }}-->
    <!--          </div>-->
    <!--          <AccountLogin></AccountLogin>-->
    <!--        </div>-->
    <!--      </transition>-->
    <!--    </q-card>-->
  </div>
</template>

<script setup>
import { inject, provide } from 'vue'
import { LoadingBar } from 'quasar'
import AccountLogin from './AccountLogin.vue'

LoadingBar.stop()
const TENANT_ID = window.IPConfig.TENANT_ID || 'MEDOC'
provide('TENANT_ID', TENANT_ID)
const isXS = inject('isXS')
</script>